<template>
	<div>
	  <ylheader :leftsvg="true" :title="'我参与的'"></ylheader>
		<!--我参与的-->
		<mt-navbar  fixed style="margin-top: 0.88rem;border-bottom:1px solid #e6e6e6" class="myjoin-navbar" v-model="selected">
			<mt-tab-item id="1">话题</mt-tab-item>
			<mt-tab-item id="2" style="width:1.4rem">话题讨论</mt-tab-item>
			<mt-tab-item id="3">说说</mt-tab-item>
			<mt-tab-item id="4">闲置</mt-tab-item>
		</mt-navbar>

		<div style="margin-top:1rem;background-color:#fff">
			<myTopic v-if="1 == selected"></myTopic>
			<myTopicDiscuss v-if="2 == selected" @showImg="popupImg"></myTopicDiscuss>
			<myTalk v-if="3 == selected" @showImg="popupImg"></myTalk>
			<myJoinUnuse v-if="4 == selected" @showImg="popupImg"></myJoinUnuse>
		</div>
       <transition name="fade">
      <div class="modal-img" v-if="popupVisible" @click="popupVisible=false">
        <mt-swipe :auto="100000" style="width: 100%;height: 100vh;position:relative;"
        :continuous="false" 
          :defaultIndex="swiperIndex" :showIndicators="false" >
            <mt-swipe-item v-for="(item,index) in popImg" :key="index" style="height:100vh" >
              <img v-lazy="item" class="swiper-img" />
            </mt-swipe-item>
          </mt-swipe>
      </div>
    </transition>
	</div>
  
</template>
<script> 
	import {  Navbar , TabItem } from 'mint-ui';
	import ylheader from 'src/components/yl-header'
	import myTopic from 'pages/mine/myTopic'
	import myTopicDiscuss from 'pages/mine/myTopicDiscuss'
	import myTalk from 'pages/mine/myTalk'
	import myJoinUnuse from 'pages/mine/myJoinUnuse'
	import api from 'src/api/index'
  import {mapState, mapMutations} from 'vuex'
	export default{
    name:"myInteraction",
		data () {
			return {
        swiperIndex:0,
      popupVisible:false,
      popImg:'',
        watchIspublish:'',
				isMyPublish:"",
				myPublish:'',
				selected : '',
				dataList:[],
				msg : "我的互动"
			}
		},
    mounted () {
      this.isMyPublish = this.isMyPublishStatue ;
      this.myPublish = this.myPublishStatue ;
      this.selected = this.interactionSelected ;
    },
    watch:{
      isMyPublish(val){
          this.changeisMyPublishStatue(val)
          this.isMyPublish = val
      },
      myPublish(val){
          this.changemyPublishStatue(val) ;
          this.myPublish = val ;
      },
      selected(val){
          this.changeinteractionSelected(val) ;
          this.selected = val ;
      }
    },
    computed:{
      ...mapState([
        'isMyPublishStatue','myPublishStatue','interactionSelected'
      ])
    },
		methods : {
      ...mapMutations([
        'changeisMyPublishStatue','changemyPublishStatue','changeinteractionSelected'
      ]),
      //显示图片
      popupImg(data,index){
        console.log(data,index)
        this.swiperIndex = index
        if(typeof data == 'string'){
          data = data.split(',')
        }
        //console.log(data,index)
        this.popImg = data;
        this.popupVisible = true;
        // console.log(this.swiperOne)
        // this.swiperOne.slideTo(index)
      },
			isPublish (value) {
        this.isMyPublishStatue = value ;
				this.isMyPublish = value ;
			},
			unusedLoadedAdd (unusedLoaded) {
			}
		},
    components: {
      Navbar , TabItem , ylheader, myTopic , myTopicDiscuss , myTalk , myJoinUnuse 
    }
	}
</script>
<style lang="less">
  .myjoin-navbar{
    border-bottom: 1px solid #e6e6e6;
    padding: 0 0.46rem 0 0.46rem;
    justify-content: space-between;
    height: 0.9rem;
    .mint-tab-item {
        width: 1rem;
      }
      .mint-tab-item-label {
        font-size: 0.3rem;
        font-family: "PingFangSC Regular";
      }
      .mint-tab-item {
        color: #494949;
        flex: inherit;
      }
      .mint-tab-item.is-selected {
        color: #fb685b;
        width: 1rem;
        border-bottom: 0.02rem solid #fb685b;
      }
      .mint-tab-item.is-selected {
        margin-bottom: 0;
      }
  }


	.interaction-navbar{
    padding: 0 1.46rem 0 1.46rem;
    justify-content: space-between;
		position:fixed;

    .mint-tab-item-label{
        line-height: 0.08rem;
      font-size: 0.3rem;
      font-family: "PingFangSC Regular";
    }
    .mint-tab-item{
       color: #494949;
      width: 1rem;
      flex: inherit;
    }
    .mint-tab-item.is-selected{
    color: #fb685b;
    width: 1rem;
    border-bottom: 0.02rem solid #fb685b;
    }
    .mint-tab-item.is-selected{
      margin-bottom: 0;
    }
	}

	.interaction-header .mint-header .is-fixed{
		z-index:2 !important;
	}
  .interaction-navbar-sep{
    background-color: #E6E6E6;
    width: 1px;
    height:0.5rem;
    position: fixed;
    left: 3.76rem;
    top: 1.08rem;
    z-index: 2;
  }
  .myjoin-navbar-sep{
    background-color: #E6E6E6;
    width: 1px;
    height:0.5rem;
    position: fixed;
    left: 1.9rem;
    top: 1.08rem;
    z-index: 2;
  }
  .myjoin-navbar-septwo{
    background-color: #E6E6E6;
    width: 1px;
    height:0.5rem;
    position: fixed;
    left: 3.68rem;
    top: 1.08rem;
    z-index: 2;
  }
  .myjoin-navbar-septhree{
    background-color: #E6E6E6;
    width: 1px;
    height:0.5rem;
    position: fixed;
    left: 5.49rem;
    top: 1.08rem;
    z-index: 2;
  }
</style>
